<template>
  <dialog-info ref="refPopupDetailDialog">
    <!-- 标题 -->
    <template #DialogTitle>
      <span>{{ currentPopupData.newCellName }}</span>
    </template>
    <!-- 内容 -->
    <template #DialogContainer>
      <div class="gis_popupdetail_wrap">
        <div class="gis_popupdetail_item">
          <h3>基本信息</h3>
          <el-descriptions class="margin-top" border>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 省市区 </span>
              </template>
              <span>{{ currentPopupData.province
                }}{{ currentPopupData.city }}市{{
                  currentPopupData.county
                }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 站点名称 </span>
              </template>
              <span>{{ currentPopupData.stationName }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> cgi </span>
              </template>
              <span>{{ currentPopupData.cgi }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 基站类型 </span>
              </template>
              <span>{{ currentPopupData.coverType }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 站号 </span>
              </template>
              <span>{{ currentPopupData.stationNo }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 频段 </span>
              </template>
              <span>{{ currentPopupData.workFrequency }}</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="currentPopupData.antDirectionAngle">
              <template #label>
                <span class="cell-item">方位角 </span>
              </template>
              <span>{{ currentPopupData.antDirectionAngle }}°</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 经纬度 </span>
              </template>
              <span>[{{
                currentPopupData.longitude.toFixed(positionFix)
              }},
                {{
                  currentPopupData.latitude.toFixed(positionFix)
                }}]</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 小区生命周期状态 </span>
              </template>
              <span>{{ currentPopupData.cellLifeStatus }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="gis_popupdetail_item">
          <h3>数据概览</h3>
          <el-descriptions class="margin-top" border>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 今日关联投诉数量 </span>
              </template>
              <span>{{ cellRelatedInfo.dayComplaintNum }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 当月关联投诉数量 </span>
              </template>
              <span>{{ cellRelatedInfo.monthComplaintNum }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span>关联实时告警数量</span>
              </template>
              <span>{{ cellRelatedInfo.realTimeAlarmNum }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <span class="cell-item"> 关联历史十日故障告警数量 </span>
              </template>
              <span>{{ cellRelatedInfo.historyAlarmNum }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="gis_popupdetail_item">
          <div class="popdtitm_items">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="健康度信息" name="health">
                <health ref="refHealth" :baseData="currentPopupData" @getInsertTime="getInsertTime" />
              </el-tab-pane>
              <el-tab-pane label="当月投诉信息" name="complain">
                <complain ref="refComplain" :baseData="currentPopupData" />
              </el-tab-pane>
              <el-tab-pane label="实时告警信息" name="alarm">
                <alarm ref="refAlarm" :baseData="currentPopupData" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </template>

    <!-- 按钮扩展 -->
    <template #extendBtn>
      <el-button v-show="isShowHealth" type="primary" @click="linkToDetail">查看详情</el-button>
    </template>
  </dialog-info>
</template>

<script setup>
import { ref, nextTick } from "vue";
// 组件
import Alarm from './components/Alarm.vue'
import Complain from './components/Complain.vue'
import Health from './components/Health.vue'
// 工具
import { useRouter /* useRoute */ } from "vue-router";
// api相关 - 工具
import { apiCommon, getDateTimeNowFormate } from "@/utils/index.js";
import { queryCellRelatedInfo } from "@/api/gis/gis";
import { disable } from "ol/rotationconstraint";


const router = useRouter();
const refPopupDetailDialog = ref(null);

// 当前气泡弹出框信息
const currentPopupData = ref({});
const positionFix = ref(3);

let isShowHealth = ref(true);
let activeName = ref("health");

const refHealth = ref(null);
const refComplain = ref(null);
const refSatisfactionLevel = ref(null);
const refAlarm = ref(null);

const insertTime = ref(getDateTimeNowFormate());
const cellRelatedInfo = ref({})

/**
 * 业务
 */
const show = (val) => {
  refPopupDetailDialog.value.show();

  currentPopupData.value = val; // 基本信息数据

  if (activeName.value !== 'health') {
    activeName.value = "health";

    nextTick(() => {
      refHealth.value.getPopupData()
    })
  }
  loadCgiRelatedInfo()
};

const handleClick = (tab, event) => {
  // console.log(tab, event);
  switch (tab.props.name) {
    case 'health':
      refHealth.value.getPopupData();
      break;
    case 'complain':
      refComplain.value.getPopupData();
      break;
      break;
    case 'alarm':
      refAlarm.value.getPopupData();
      break;
  }
}

const getInsertTime = (val) => {
  insertTime.value = val
}

// 查看详情
const linkToDetail = () => {
  const { cgi } = currentPopupData.value;

  router.push({
    path: "/health/stationHealthDetail",
    query: { cgi, insertTime: insertTime.value },
  });
};

const loadCgiRelatedInfo = () => {
  queryCellRelatedInfo({ cgi: currentPopupData.value.cgi }).then((res) => {
    cellRelatedInfo.value = res.data;
  });
};



defineExpose({
  show,
});
</script>

<style lang="scss" scoped>
.gis_popupdetail_wrap {
  :deep(.gis_popupdetail_item) {
    margin-bottom: 20px;

    h3 {
      color: #303133;
      margin-bottom: 10px;
      font-size: 15px;
    }

    .popdtitm_items {
      min-height: 300px;

      .el-tabs__content {
        min-height: 260px;
      }
    }
  }
}
</style>
